// 注册一个组件
 Vue.component('myformgroup',{
     template:
    	 '<div class="formgroup-content" :style="groupstyles">' +
	     ' <div class="content-box">' +
	 	 '  <div class="content"><strong :style="titlestyles"><span><b>{{title}}</b></span></strong>' +
	 	 '   <div class="text" :style="styles">' +
	 	 '    <slot></slot>' +
	 	 '   </div>' +
	 	 '  </div>' +
	 	 ' </div>' +
	     '</div>'
 		,
     data:function(){
         return {
             count:0
         }
     },
     props:{
    	 title:String,
    	 bgtrans:Boolean,  // 是否透明
    	 titlebgtrans:Boolean,  // 是否透明
    	 titletop: {
    		 type: Number,
         	 default: -1
    	 },
    	 borderleftflag: {
    		 validator(value) {
                 if(!value) return true;
                 return '#1px dashed #dedede';
             },
             default: ''
    	 },
    	 titlebgcolor: {
             validator(value) {
                 if (!value) return true;
                 return this.titlebgtrans? 'transparent' : isColor(value);
             },
             default: '#FFF'
         },
    	 bgcolor: {
             validator(value) {
                 if (!value) return true;
                 return this.bgtrans? 'transparent' : isColor(value);
             },
             default: '#FFF'
         },
         titlecolor: {
             validator(value) {
                 if(!value) return true;
                 return isColor(value);
             },
             default: '#42ae7c'
         },
         color: {
             validator(value) {
                 if (!value) return true;
                 return isColor(value);
             },
             default: '#666'
         },
         titlefontsize: {
             validator(value) {
                 return /^(\.|\d+\.)?\d+(px|rem)$/.test(value);
             },
             default: '.22rem'
         },
         fontsize: {
             validator(value) {
                 return /^(\.|\d+\.)?\d+(px|rem)$/.test(value);
             },
             default: '.22rem'
         },
         padding: {
             validator(value) {
                 if(Number(value) === 0) {
                     return true;
                 }
                 return /^(\.|\d+\.)?\d+(px|rem)$/.test(value);
             },
             default: '10px 20px 5px'
         }
     },
     computed: {
    	 titlestyles() {
             return {
                 color: this.titlecolor,
                 backgroundColor: this.titlebgtrans? 'transparent' : this.titlebgcolor,
                 fontSize: this.titlefontsize,
                 top: this.titletop ? this.titletop+'px' : ''
             }
         },
         groupstyles() {
             return {
            	 borderLeft: this.borderleftflag
             }
         },
    	 styles() {
             return {
                 color: this.color,
                 backgroundColor: this.bgtrans? 'transparent' : this.bgcolor,
                 fontSize: this.fontsize,
                 padding: this.padding
             }
         }
     },
     methods:{
         jump:function(){
             this.count += 1
         }
     }
});